<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong id="show">0</strong>
    <button id="start">开始</button>
    <button id="pause">暂停</button>
    <button id="stop">停止</button>

    <script>

        // 开始  开始计数   定时器  show.innerHTML++
        // 暂停  清除定时器
        // 停止  清除定时器 / show.innerHTML = 0


        // 定时器的两大问题
        //    定时器的时间不能调的过小 <20
        //    定时器叠加的问题  
        //          按钮只能点一次  --- 通过开关来控制
        //          
        //    页面获取焦点的时候，页面资源是正常加载的 ； 页面失去焦点的时候，页面资源优先加载获取了焦点的页面
       

        var oShow = get('show') ;
        var flag = true ;  // 默认状态可以点击
        var t ;   // 定时器点击开始的时候才出现，点暂停的时候又是另一个函数，所以t必须是全局变量


        // 点击开始
        get('start').onclick = function() {
            if(flag) {
                flag = false ;   // 点击完了之后就不能再点击  --- 状态变成false
                t = setInterval(function(){
                    oShow.innerHTML++ ;
                } , 1000)
            }
            else {
                console.log('白费力气')
            }
        }


        // 点击暂停
        get('pause').onclick = function() {
            // 清除定时器
            clearInterval(t) ;
        }


        // 点击停止
        get('stop').onclick = function() {
            // 清除定时器
            clearInterval(t) ;
            // 计时器清零
            oShow.innerHTML = 0 ;
            // 开启可以启动定时器的开关
            flag = true ;
        }




        function get(id) {
            return document.getElementById(id)
        }

    </script>
    
</body>
</html>